<template>
  <!-- 配种管理 -->
  <view class="form-filling-page-box">
    <!-- 上面那一块的样式结束-->
    <!-- 表单开始 -->
    <Navbar navbarTitle="配种管理"></Navbar>
    <view class="form-validation-box">
      <uni-forms
        ref="formValidation"
        :modelValue="formData"
        validateTrigger="bind"
        :rules="custRules"
        label-position="top"
        labelWidth="100px"
      >
        <uni-forms-item label="母羊耳标号" required name="earTag">
          <view class="scanCode_box">
            <uni-easyinput v-model="formData.earTag" placeholder="请输入" />
            <button @click="scanCodes('earTag')" class="button reset">扫码</button>
          </view>
        </uni-forms-item>

        <uni-forms-item label="公羊耳标号" required name="breedingGoatEarTag">
          <view class="scanCode_box">
            <uni-easyinput v-model="formData.breedingGoatEarTag" placeholder="请输入" />
            <button @click="scanCodes('breedingGoatEarTag')" class="button reset">扫码</button>
          </view>
        </uni-forms-item>

        <uni-forms-item label="配种时间" required name="breedingTime">
          <view class="example-body">
            <uni-datetime-picker
              type="datetime"
              v-model="formData.breedingTime"
              @change="changeEarTag"
              placeholder="请选择配种时间"
            />
          </view>
        </uni-forms-item>
      </uni-forms>
    </view>
    <!-- 表单结束 -->
    <view class="button-assembly-box">
      <button @click="reset" class="button reset">重置</button>
      <button @click="submit" class="button notarize">确认</button>
    </view>
  </view>
</template>

<script>
import Navbar from "@/components/common/Navbar.vue";
export default {
  components: {
    Navbar,
  },
  data() {
    return {
      areaArr: [],
      formData: {
        earTag: "",
        breedingGoatEarTag: "",
        breedingTime: "",
      },
      earTagList: [
        { value: 0, text: "篮球" },
        { value: 1, text: "足球" },
        { value: 2, text: "游泳" },
      ],
      custRules: {
        earTag: {
          rules: [
            {
              required: true,
              errorMessage: "请选择母羊耳标号",
            },
          ],
        },
        breedingGoatEarTag: {
          rules: [
            {
              required: true,
              errorMessage: "请选择公羊耳标号",
            },
          ],
        },
        breedingTime: {
          rules: [
            {
              required: true,
              errorMessage: "请选择配种时间",
            },
          ],
        },
      },
    };
  },
  async mounted() {},

  methods: {
    changeEarTag() {},
    // 点击重置按钮
    reset() {
      this.formData = {
        earTag: "",
        breedingGoatEarTag: "",
        breedingTime: "",
      };
    },
    // 进行扫码
    scanCodes(name) {
      // 调起后置摄像头扫码
      uni.scanCode({
        scanType: ["barCode", "qrCode", "pdf417", "datamatrix"],
        success: (res) => {
          uni.showToast({
            title: "扫描结果：" + res.result,
            duration: 2000,
          });
          this.setScanCodeResult(res.result,name)
        },
        fail: (err) => {
          // 扫描失败回调
          uni.showToast({
            icon: "error",
            title: "扫描结果3：" + err.result,
            duration: 2000,
          });
        },
      });
    },

    //将扫码结果赋值给耳标号
    setScanCodeResult(result,name){
      this.formData[name] = result
    },

    // 点击确定按钮
    submit() {
      this.$refs["formValidation"]
        .validate()
        .then(async () => {
          const res = await this.$api.homeServer.getAppProductInitialResult(
            this.formData
          );
          if (res.code !== "200") return;
          if (!res.data.records || res.data.records.length === 0) {
            uni.showToast({
              title: "没有找到匹配的产品",
            });
            return;
          }
          let data = JSON.stringify([...res.data.records]);
          uni.setStorageSync("matchedData", data);
          uni.navigateTo({
            url: "/pages/home/productScreening/matchingResult",
          });
        })
        .catch((err) => {
          if (err[0]) {
            uni.showToast({
              title: err[0].errorMessage,
              icon: "error",
            });
          }
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.form-filling-page-box {
  // height: 100vh;
  width: 100vw;
  background: #fff;
  .button-assembly-box {
    position: fixed;
    bottom: 0;
    left: 0;
    width: calc(100vw - 64rpx);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 32rpx 30rpx;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 -4px 8px 0 rgba(0, 0, 0, 0.04), 0 0 1px 0 rgba(0, 0, 0, 0.04);

    .button {
      margin: 0;
      height: 80rpx;
      font-size: 28rpx;
      border-radius: 40rpx;
      background-color: #fff;
    }

    .reset {
      width: 156rpx;
      margin-right: 24rpx;
      border: 1rpx solid #e7e7e7;
    }

    .notarize {
      flex: 1;
      color: #fff;
      background: $uni-color-success;
    }

    .button::after {
      border: 0;
    }
  }

  .form-validation-box {
    padding: 56rpx 32rpx 140rpx;
    background-color: #fff;
    border-radius: 32rpx;
    z-index: 12;
    .title {
      display: block;
      color: #333;
      font-size: 28rpx;
      font-weight: 500;
      padding: 24rpx 0;
    }

    /deep/.uni-forms-item {
      margin-bottom: 40rpx;

      .uni-forms-item__content {
        position: relative;
        .uni-select,
        .input-value {
          background-color: #fff;
        }

        .unit {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right: 32rpx;
          color: #333;
          font-size: 24rpx;
          font-weight: 400;
        }
      }

      .input-value-border,
      .uni-date-editor--x,
      .uni-date-x--border,
      .uni-date-x,
      .uni-date-single,
      .uni-select {
        border-radius: 45rpx !important;
        font-size: 28rpx !important;
        border-color: #e7e7e7;
        height: 78rpx;
        background-color: initial;
      }

      .uni-easyinput__content {
        border-radius: 45rpx;
        border-color: #e7e7e7;

        .uni-icons {
          color: #e7e7e7 !important;
          display: none;
        }
      }

      .is-focused {
        border-color: #e7e7e7 !important;
      }

      .uni-forms-item__label {
        flex-direction: row-reverse;
        justify-content: flex-end !important;
        color: #333;
        font-size: 24rpx;
        height: 40rpx;
        font-weight: 400;
        padding-bottom: 20rpx;

        .is-required {
          margin: 4rpx 0 0 8rpx;
          color: red;
        }
      }
    }
  }
}
</style>
